<template>
  <div class="wy-main business-car">
      <a-row class="wy-main-title">
           <a-col :span="24">
               <p class="title-p">
                   <a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >发布城市货运信息</span>
					<a-divider class="title-divider"  />
               </p>
           </a-col>
       </a-row>
      <a-form :form="form" @submit="handleSubmit" class="wy-form">
          	<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="请选择服务城市">
				<a-select  :disabled='disabled' v-decorator="[ 'city', {rules: [{ required:true, message: '请选择城市!' }]} ]" style="width: 280px;" placeholder="请选择服务城市">
					<a-select-option value="昆明">昆明</a-select-option>
					<a-select-option value="大理">大理</a-select-option>
					<a-select-option value="丽江">丽江</a-select-option>
				</a-select>
			</a-form-item>
            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 28 }" label="请选择服务类别">
             <a-checkbox :value="item.dictKey" :defaultChecked="serviceTypes.indexOf(item.dictKey)!=-1?true:false" v-for="(item,index) in typeList" :key="index" @change='aaa'>{{item.dictValue}}</a-checkbox>
             <a-input  style="width: 100px; margin-top:10px;" type="hidden"  :disabled='disabled' v-decorator="[ 'serviceTypes',{rules: [{ required: true, message: '请选择服务类别' }]}]"  />
			</a-form-item>
            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="车牌号">
				<a-select  :disabled='disabled' v-decorator="[ 'vehicleId', {rules: [{ required: true, message: '请选择车牌号!' }]} ]" style="width: 280px;" placeholder="请选择车牌号"
				showSearch    
				>
					<a-select-option :value="itme.vehicleId" v-for="(itme,index) in licenceList" :key=" index">
						{{itme.licence}}
					</a-select-option>
				</a-select>
				<router-link to="/business/car/vehicleadd" v-if='type!="info"'>
				<a-button type="primary" style="width:108px;height:40px;margin-left:20px;">新增车辆</a-button>
			    </router-link>
			</a-form-item>
             <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="驾驶员">
				<a-select  :disabled='disabled' v-decorator="[ 'driverId', {rules: [{ required: true, message: '请选择驾驶员!' }]} ]" style="width: 280px;" placeholder="请选择驾驶员">
					<a-select-option v-for="(itme,index) in driverList" :key="index" :value="itme.driverId">
						{{itme.driverName}}
					</a-select-option>
				</a-select>
				<router-link to="/business/car/driveradd" v-if='type!="info"'>
				<a-button type="primary" style="width:108px;height:40px;margin-left:20px;">新增驾驶员</a-button>
			    </router-link>
			</a-form-item>

            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="驾驶员联系电话">
				<a-select  :disabled='disabled' v-decorator="[ 'driverId', {rules: [{ required: true, message: '请选择驾驶员!' }]} ]" style="width: 280px;" placeholder="请选择驾驶员">
					<a-select-option v-for="(itme,index) in driverList" :key="index" :value="itme.driverId">
						{{itme.mobile}}
					</a-select-option>
				</a-select>
			</a-form-item>
            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }" label="运价" style="margin-bottom: 0 !important;">
				<span style="margin-right:10px;">起运价</span><a-input style="width: 100px" :disabled='disabled' v-decorator="[ 'startingPrice' ,{rules: [{ required: true, message: '请输入起运价' }]}]"  /><b style="margin-left: 10px; margin-right:10px;">元</b>
				<span style="margin-left: 10px; margin-right: 10px;">起运里程</span><a-input style="width: 100px" :disabled='disabled' v-decorator="[ 'startingMileage',{rules: [{ required: true, message: '请输入起运里程' }]}]" /><b style="margin-left: 10px;margin-right: 10px;">公里</b><br/>
				
				<span style="margin-right:10px; margin-top:10px;">里程价</span><a-input  style="width: 100px; margin-top:10px;"  :disabled='disabled' v-decorator="[ 'mileagePrice',{rules: [{ required: true, message: '请输入里程价' }]}]"  /><b style="margin-left: 10px;">元/公里</b>
                <a-icon type="environment" slot="suffix" style="color: #15837A;" />
			</a-form-item>
			 

            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="有效期" style="margin-top: 26px">
				<a-input  :disabled='disabled' v-decorator="[ 'validityTerm']" placeholder='请输入有效期' /><b style="margin-left: 18px;">（天）</b>
			</a-form-item>
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="备注" >
				<div class="car-label"  >
					 <span  :class="i.class" v-for="(i,index) in Label_list" :key="index" @click="Label_chenge(index)" :disabled='disabled'>
						{{i.name}}
					</span>
				</div>
				<a-textarea  :disabled='disabled' placeholder="请填写备注" v-model="description" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
			</a-form-item>
			<!--我已阅读-->
			<div class="ant-row ant-form-item"  v-if='type!="info"'>
			  <div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-checkbox v-model="agreement" >
								我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
							</a-checkbox>
						</span>
					</div>
				</div>
			</div>
	
	  <div class="ant-row ant-form-item" v-if='type!="info"'>
			<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary" :disabled = '!agreement' html-type="submit" style="width: 300px;height:50px;margin-top: -10px;" >
								{{type == 'edit'? '提交审核并发布' : '提交审核并发布'}}
							</a-button>
						</span>
					</div>
				</div>
	  </div>
      </a-form>

	  <a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
	  </a-modal>
	  <a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
	  </a-modal>
	 
  </div>

    
</template>
<script>
import Web from '@/components/tool/web'
import User from '@/components/tool/user'
export default {
    components: {
		Web,
		User
    },
    props: ['datail','type','isSee'],
    data(){
        return {
			disabled:false,
			checked:true,
			agreement:false,
			webShow:false,
            userShow:false,
			description:'',//备注
			licenceList: '',//车牌号列表
			driverList: [],//驾驶员列表
			urbanFreightId:'',

		   	Label_list: [{
						name: '有货速度联系',
						class: ''
					},
					{
						name: '天天发车',
						class: ''
					},
					{
						name: '低价急走',
						class: ''
					},
					{
						name: '求资源',
						class: ''
					}
				],
				serviceTypes:'',
				//城市类型
				cityList: [],
				//服务类型 
				typeList:[]

		}
	},
	
    beforeCreate() {
		this.form = this.$form.createForm(this);
	},
	created() {
		if(this.isSee){
			this.disabled = true
		}else{
			this.disabled = false
		}
		if(this.datail){
			let datail = this.datail
			this.urbanFreightId = datail.urbanFreightId;
			this.serviceTypes = datail.serviceTypes;
			// this.typeList = this.serviceTypes;
			console.log()
			setTimeout(() => {
				this.form.setFieldsValue({
					driverId:datail.driverId,
					vehicleId:datail.vehicleId,
					city:datail.city,
					startingPrice:datail.startingPrice,
					startingMileage:datail.startingMileage,
					mileagePrice:datail.mileagePrice,
					validityTerm:datail.validityTerm,
					 serviceTypes: datail.serviceTypes,


				})
			},0)
			this.description = datail.description
		}
		// this.getCommonDict('cityList',26);
		this.getdriver()
		this.getvehicle()
		this.gettypeList()
    },
	methods: {
		aaa(d){

			if(this.serviceTypes.length){

				if(this.serviceTypes.indexOf(d.target.value)!=-1){

					var serverList = this.serviceTypes.split(',');

					for(var i=0;i<serverList.length;i++){

						if(d.target.value == serverList[i]){
	
							serverList.splice(i,1)
							break;
						}
					}
					this.serviceTypes = serverList.join(',')

				}else{

						this.serviceTypes = this.serviceTypes+','+d.target.value
				}
			}else{
				this.serviceTypes = ''+d.target.value

			}

			setTimeout(() => {
				this.form.setFieldsValue({
					 serviceTypes: this.serviceTypes,

				})
			},0)
		},
		//服务类型
		gettypeList(){
			
			this.getCommonDict('typeList',35)
		},
         //字典表接口
		 getCommonDict (nameList,type) {
				this.loading = true
				this.$get('/info/commonDict', {
					dictType: type,
					PageSize: 99
				}).then((r) => {
					this.loading = false
					this[nameList] = r.data.data.rows
				}).catch((e) => {
					this.loading = false;
				})
			},
		close() {
			this.webShow = false
			this.userShow = false

		},
		// 获取驾驶员信息
		 getdriver(){
				this.$get('/info/infoDriver/getDriverId').then((r) => {
					console.log('驾驶员',r)
					this.driverList = r.data.data
				})
			},
			//获取车辆信息
		 getvehicle(){
				this.$get('/info/infoVehicle/getVehicleId').then((r) => {
					console.log('汽车: ',r)
					this.licenceList = r.data.data
					
				})
			},
	
		


		// 选择标签
		Label_chenge(index) {
				if(this.isSee){
				return false
				}
				for(var i in this.Label_list) {
					if(i == index) {
						if(!this.Label_list[i].class) {
							this.Label_list[i].class = 'active'
							this.description += this.Label_list[i].name+'，'
						} else {
							this.Label_list[i].class = ''
							this.description = this.description.split(this.Label_list[i].name+'，').join("");
						}
					}
				}
			},
			//审核并发布
			handleSubmit(e) {
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
						this.loading = true;
						values.description = this.description
						
						if(this.type == 'edit'){
							this.editSubmit(values)
						}else{
							this.addSubmit(values)
						}
							
					}
				});
			},
				// 添加保存数据
				addSubmit(values){
					// console.log(this.serviceTypes)
				// values.serviceTypes = this.serviceTypes;
			
				this.$post('/info/urbanFreight', values,true).then((r) => {
					console.log(r,8989)
					if(r.status == 200){
						this.$message.success(r.data.message)
						this.form.resetFields();
					}
					console.log(1111)
					this.loading = false;
					this.description = ""
					this.serviceTypes = ""
					

				}).catch((e) => {
					console.log(e)
					this.$message.error(e)
					this.loading = false;
				})
			},
			editSubmit(values){
				// values.serviceTypes = this.serviceTypes;
				values.urbanFreightId = this.urbanFreightId
				// values.serviceTypes = values.serviceTypes.join(',')
				this.$put('/info/urbanFreight', values,true).then((r) => {
					console.log(r,8989)
					if(r.status == 200){
						console.log(333)
						this.$message.success(r.data.message)
						this.$emit('close');	
					}
				}).catch((e) => {
					console.log(e)
					this.$message.error(e)
				})
			},

			



	}
}


</script>
<style lang="less">
		.car-label {
			margin-top: 10px;
			span {
				border: 1px solid #15837A;
				width: 100px;
				height: 40px;
				border-radius: 2px;
				text-align: center;
				line-height: 36px;
				font-size: 14px;
				display: inline-block;
				margin-right: 30px;
				margin-bottom: 20px;
			}
			.active {
				background: #15837A;
				color: #fff;
			}
			.span:first-child {
				margin-left: 0;
			}
			span,
			span:hover {
				cursor: pointer;
			}
		}


</style>


